<template>
  <van-row type="flex" align="center" justify="space-between">
    <van-col><b class="L-text L-bold-text">{{itemdata.stitle}}</b></van-col>
    <van-col style="text-align:right"></van-col>
  </van-row>

  <div v-for="(item,index) in alertdata" :key="index">
    <div class="L-margin-top-10 L-text-align-left L-secondary-text-color">
      <i class="iconfont icon-radio"><span class="L-small-text ">{{ item.msg }}</span></i>
    </div>
    <div class="alert-container">
      <div class="alert-box L-margin-top-10" v-for="(ditem,dindex) in item.datas" :key="dindex">
        <van-row :gutter="10">
          <van-col class="L-margin-top-10" :span="8" v-for="(titem,tindex) in item.titles" :key="tindex">
            <div class="L-mini-text L-placeholder-text-color">{{titem.label}}</div>
            <div class="L-small-text  L-margin-top-10">{{ditem[titem.prop]}}</div>
          </van-col>
        </van-row>
      </div>
      <van-empty v-if="item.datas.length===0" description="没有数据" />
    </div>
  </div>
  <van-empty v-if="alertdata.length===0" description="没有数据" />


  <!-- <van-row :gutter="20" type="flex" align="center" class="rank-head">
    <van-col :span="4"></van-col>
    <van-col v-for="(item,index) in itemdata.columnNames" :key="index" :span="10" style="text-align: left;">
      <b class="L-small-text L-bold-text">{{item.label}}</b>
    </van-col>
  </van-row>
  <div class="rank-container">
   
  </div> -->

</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
const props = defineProps({
  itemdata: {
    type: Object,
    default: {},
  },
});

onMounted(() => {
  parseData();
});

const alertdata = ref([]);
const alertTitle = ref([]);

function parseData() {
  const { itemdata } = props;

  alertdata.value = itemdata.alertdata.map((item) => {
    return JSON.parse(item);
  });
  // alertTitle.value =

  console.log("%%%%", alertdata.value);
}
</script>

<style scoped>
.alert-container {
  max-height: 500px;
  overflow-y: scroll;
}

.alert-box {
  background: #eef4fb;
  padding: 15px 10px;
}
</style>